<template>
  <div class="page-main">
    <el-breadcrumb class="breadcrumb">
      <el-breadcrumb-item>管理员</el-breadcrumb-item>
      <el-breadcrumb-item>订单管理</el-breadcrumb-item>
    </el-breadcrumb>
    <div class="main-content">
      <div class="box-card">
        <span style="color: #101010; font-size: 16px">订单管理</span>
      </div>
      <div class="search">
        <div style="margin-top: 20px">
          <el-input
              placeholder="请输入商店ID"
              prefix-icon="el-icon-search"
              v-model="status.keywords"
              style="width: 250px; margin-right: 20px"
              clearable
              @keyup.enter="getOrderList"
              @clear="getOrderList"
          />
          <el-date-picker
              v-model="status.date"
              value-format="YYYY-MM-DD"
              style="width: 250px; margin-right: 20px"
              type="date"
              placeholder="选择日期"
              @change="getOrderList"
          />
          <el-select v-model="status.state" @change="getOrderList">
            <el-option label="全部" :value="null"/>
            <el-option label="待接单" :value="2"/>
            <el-option label="未完成" :value="3"/>
            <el-option label="已完成" :value="4"/>
            <el-option label="已退单" :value="5"/>
          </el-select>
          <el-button
              type="primary"
              icon="el-icon-search"
              @click="getOrderList()"
              style="margin-left: 10px"
          >
            搜索
          </el-button>
        </div>
      </div>
      <div class="table">
        <el-table :data="status.orderList" style="width: 100%">
          <el-table-column type="index" align="center" />
          <el-table-column prop="userName" label="用户名" align="center" />
          <el-table-column prop="shopId" label="商店Id" align="center" />
          <el-table-column label="商店名字" align="center">
            <template #default="scope">
              <div>{{ scope.row["shop"]["shopName"] }}</div>
            </template>
          </el-table-column>
          <el-table-column prop="allPay" label="金额" align="center" />
          <el-table-column prop="createTime" label="下单时间" align="center" />
          <el-table-column label="状态" align="center">
            <template #default="scope">
              <div v-if="scope.row.state === 2">待接单</div>
              <div v-else-if="scope.row.state === 3">未完成</div>
              <div v-else-if="scope.row.state === 4">已完成</div>
              <div v-else-if="scope.row.state === 5">已退单</div>
            </template>
          </el-table-column>
          <el-table-column
              fixed="right"
              label="操作"
              align="center"
              width="100"
          >
            <template #default="scope">
              <el-button type="text" @click="showDetail(scope.row)" v-if="scope.row.state !== 4 && scope.row.state !== 5">操作</el-button>
              <el-button type="text" @click="showDetail(scope.row)" v-else>详情</el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <div class="page-div">
        <el-pagination
            v-model:currentPage="pageStatus.currentPage"
            v-model:page-size="pageStatus.pageSize"
            :page-sizes="[5, 10, 20]"
            :pager-count="5"
            background
            layout="total, sizes, prev, pager, next, jumper"
            :total="pageStatus.total"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
        />
      </div>
    </div>
  </div>
  <el-dialog
      v-model="orderDialog.showFlag"
      title="订单详情"
      width="50%"
      :before-close="closeOrderDialog"
  >
    <div>
      <el-form
          label-position="right"
          label-width="120px"
          :model="orderDialog.data"
          ref="personFormRef"
          :inline="true"
          disabled
      >
        <el-form-item label="商店名:" v-if="orderDialog.data.shop['shopName']">
          <el-input v-model="orderDialog.data.shop['shopName']" />
        </el-form-item>
        <el-form-item label="商店ID:" v-if="orderDialog.data.shop['shopId']">
          <el-input v-model="orderDialog.data.shop['shopId']" />
        </el-form-item>
        <el-form-item label="订单号:">
          <el-input v-model="orderDialog.data.orderId" />
        </el-form-item>
        <el-form-item label="用户名:">
          <el-input v-model="orderDialog.data.userName" />
        </el-form-item>
        <el-form-item label="联系电话:">
          <el-input v-model="orderDialog.data.userPhone" />
        </el-form-item>
        <el-form-item label="地址:">
          <el-input v-model="orderDialog.data.address" />
        </el-form-item>
        <el-form-item label="餐具份数:">
          <el-input v-model="orderDialog.data.tablewareNum" />
        </el-form-item>
        <el-form-item label="付款:">
          <el-input v-model="orderDialog.data.allPay" />
        </el-form-item>
        <el-form-item label="备注:" class="whole-form">
          <el-input v-model="orderDialog.data.remarks" type="textarea" rows="4" />
        </el-form-item>
      </el-form>
      <el-table :data="orderDialog.data.orderItems" style="width: 100%">
        <el-table-column type="index" align="center" />
        <el-table-column prop="mealName" label="餐品名" align="center" />
        <el-table-column prop="num" label="数目" align="center" />
        <el-table-column prop="mealPrice" label="餐品单价" align="center" />
        <el-table-column prop="allMealPrice" label="总价格" align="center" />
      </el-table>
    </div>
    <template #footer>
      <span class="dialog-footer">
        <el-button type="primary" @click="showConfirm(cancelOrder)">退单</el-button>
      </span>
    </template>
  </el-dialog>
  <confirm-dialog
      ref="confirmDialogRef"
      :info="info"
      @handleConfirm="handleConfirm"
      @cancelConfirm="cancelConfirm"
  ></confirm-dialog>
</template>

<script setup>
import {onMounted, reactive, ref} from "vue";
import {httpPostManage} from "@/api/httpService";
import ConfirmDialog from "@/components/ConfirmDialog";
import {Debounce} from "@/tool";
import {ElMessage} from "element-plus";

const confirmDialogRef = ref(null);

const status = reactive({
  keywords: "",
  date: "",
  state: null,
  orderList: []
});

const orderDialog = reactive({
  showFlag: false,
  data: {
    shop: {
      shopName: "",
      shopId: ""
    },
    orderId: "",
    userName: "",
    userPhone: "",
    address: "",
    tablewareNum: 0,
    remarks: "",
    allPay: "",
    state: 0,
    orderItems: []
  }
});

const getOrderList = async () => {
  let url = "/managerGetAllOrders"
  let params = {
    keywords: status.keywords,
    date: status.date,
    state: status.state,
    currentPage: pageStatus.currentPage,
    pageSize: pageStatus.pageSize
  }
  let res = await httpPostManage(url, params);
  status.orderList = res.data.data;
  pageStatus.total = res.data.total;
}

const showDetail = async (item) => {
  orderDialog.data.shop = item.shop;
  let url = "/getOneOrder";
  let params = {
    orderId: item["orderId"]
  }
  let res = await httpPostManage(url, params);
  for (let p in orderDialog.data) {
    orderDialog.data[p] = res.data[p] ? res.data[p] : orderDialog.data[p];
  }
  orderDialog.showFlag = true
}

const closeOrderDialog = () => {
  let obj = {
    shop: {
      shopName: "",
      shopId: ""
    },
    orderId: "",
    userName: "",
    userPhone: "",
    address: "",
    tablewareNum: 0,
    remarks: "",
    allPay: "",
    state: 0,
    orderItems: []
  }
  orderDialog.data = obj;
  orderDialog.showFlag = false;
}

/**
 * 分页模块
 **/
//#region 分页模块
const pageStatus = reactive({
  currentPage: 1,
  pageSize: 10,
  total: 0
});

//改变每页页数
const handleSizeChange = (val) => {
  pageStatus.pageSize = val;
  getOrderList();
};

//改变当前页
const handleCurrentChange = (val) => {
  pageStatus.currentPage = val;
  getOrderList()
};

/**
 * confirmDialog模块
 **/
const info = reactive({
  title: "",
  content: "",
  methodName: "",
  methodParams: {}
});

const handleConfirm = Debounce(function (dialogInfo) {
  dialogInfo.methodName(dialogInfo.methodParams.methodId);
  info.title = "";
  info.content = "";
  info.methodName = "";
  info.methodParams = {};
});

const cancelConfirm = () => {
  info.title = "";
  info.content = "";
  info.methodName = "";
  info.methodParams = {};
  orderDialog.showFlag = true;
};

const showConfirm = Debounce((methodName) => {
  orderDialog.showFlag = false;
  info.title = "确定你的操作";
  info.content = "是否确认退单?";
  info.methodName = methodName;
  info.methodParams["methodId"] = orderDialog.data.orderId;
  confirmDialogRef["value"].makeDialogVisible();
});

const cancelOrder = async (id) => {
  let url = "/cancelOrder";
  let params = {
    orderId: id
  }
  let res = await httpPostManage(url, params);
  await getOrderList();
  handleConfirm();
  closeOrderDialog();
  ElMessage.success(res.data);
};

onMounted(async () => {
  await getOrderList();
});
</script>

<style lang="scss" scoped>
@import "../../assets/style/layout.scss";
</style>